<!-- 车辆列表 -->
<template>
  <div class="dashboard-container vehicle customer-list-box">
    <div class="search">
      <el-card>
        <el-form
          ref="searchForm"
          :model="searchForm"
          :inline="true"
        >
          <el-row>
            <el-col
              :span="8"
              class="top"
            >
              <el-form-item
                label="车辆类型："
                prop="struckTypeId"
              >
                <el-select
                  v-model="searchForm.struckTypeId"
                  clearable
                >
                  <el-option
                    v-for="item in carTypeList"
                    :key="item.id"

                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col
              :span="8"
              class="top"
            >
              <el-form-item
                label="车牌号码："
                prop="slicensePlate"
              >
                <el-input
                  v-model="searchForm.slicensePlate"
                  placeholder="请输入车牌号码"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col
              :span="8"
              class="top"
            >
              <el-form-item>
                <el-button
                  type="danger"
                  @click="searchCar"
                >搜索</el-button>
                <el-button @click="resetSearchForm">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <div class="list">
      <TabChange
        :default-active-index="showStatus"
        :setting-list="[
          {
            value: 0,
            label: '全部',
            num: allCar
          },
          {
            value: 1,
            label: '可用',
            num: workCarNum
          },
          {
            value: 2,
            label: '停用',
            num: unWorkCarNum
          }
        ]"
        @tabChange="tabChange"
      >
      </TabChange>
    </div>
    <div
      v-loading="loading"
      class="table"
    >
      <el-card shadow="never">
        <el-button
          type="danger"
          class="addcar"
          @click="addCar"
        >新增车辆</el-button>
        <el-table
          class="el-table"
          :data="carList"
          stripe
        >
          <el-table-column
            label="序号"
            type="index"
            :index="indexMethod"
            width="80"
          ></el-table-column>
          <el-table-column
            label="车牌号码"
            prop="licensePlate"
          ></el-table-column>
          <el-table-column
            label="车辆类型"
            prop="truckTypeName"
          ></el-table-column>
          <el-table-column
            label="司机数量"
            prop="driverNum"
          ></el-table-column>
          <el-table-column
            label="车辆状态"
          >
            <template slot-scope="scope">
              <el-badge
                is-dot
                :type="scope.row.workStatus?'primary':'warning'"
              ></el-badge>
              {{ scope.row.workStatus?'可用':'停用' }}
            </template>
          </el-table-column>
          <el-table-column
            label="GPS设备ID"
            prop="deviceGpsId"
          ></el-table-column>
          <el-table-column
            label="实载重量（T）"
            prop="allowableLoad"
          ></el-table-column>
          <el-table-column
            label="实载体积（方）"
            prop="allowableVolume"
          ></el-table-column>
          <el-table-column
            label="操作"
            style="  textAlign: center"
            width="200px"
          >
            <template
              #default="{row}"
            >
              <el-link
                type="primary"
                :underline="false"
                @click.native="Edit(row.id)"
              >查看详情</el-link>
              <span>|</span>
              <el-link
                :underline="false"
                :type="row.workStatus?'danger':'primary'"
                @click="doWorkCar(row.workStatus,row.id)"
              > {{ row.workStatus?"停用":"启用" }} </el-link>
              <span>|</span>
              <el-link
                :underline="false"
                type="primary"
                @click="handleArrangeDriver(row)"
              >配置司机</el-link>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            :current-page="page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </el-card>
      <VehicleAdd
        ref="addVehicleModels"
        class="add-form-dialog"
        :title-info="titleInfo"
        :form-base="formData"
        @newDataes="getData"
      ></VehicleAdd>
      <!-- 安排司机 -->
      <arrangeDriver
        ref="arrangeDriverModels"
        :title-info="{ text: '配置司机' }"
        :form-base-ad="{}"
        :car-modal-info="carModalInfo"
        :drivers-list="driversList"
        @newDataes="getData"
      ></arrangeDriver>
    </div>
  </div>
</template>
<script>
import TabChange from '@/components/TabChange'
import VehicleAdd from '@/views/transit/components/vehicle-add.vue'
import arrangeDriver from '@/views/transit/components/arrange-driver'
import { getCarTypeStatics, getCarTypeList, truckList, truckStatusUse, truckStatusNoUse, unBindDriverList } from '@/api/transit'
export default {
  name: 'Vehicle',
  components: {
    TabChange,
    VehicleAdd,
    arrangeDriver
  },
  data() {
    return {
      loading: false,
      searchForm: {
        slicensePlate: '', // 车牌号码
        struckTypeId: ''// 车牌类型的ID
      },
      isSHowDialog: false,
      page: 1,
      pageSize: 10,
      showStatus: 0,
      unWorkCarNum: '',
      workCarNum: '',
      allCar: '',
      carTypeList: [], // 车辆类型
      total: null,
      // totals: null, // 不同车辆数量
      carList: [], // 车辆的信息，进行渲染的列表
      statusType: '',
      unWorkCarList: [], // 停用车辆列表
      workCarList: [], // 工作车辆列表，
      // allCarList: []// 所有车辆的列表信息

      // 新增车辆
      titleInfo: {
        pageTitle: '',
        text: ''
      },
      formData: {
        fleet: '',
        deviceGpsId: '',
        licensePlate: '',
        allowableLoad: '',
        allowableVolume: '',
        truckType: ''
      },
      settingList: [
        {
          key: 'all',
          value: 2,
          label: '全部',
          num: 0 // 全部数量
        },
        {
          key: 'able',
          value: 1,
          label: '可用',
          num: 0 // 停用数量
        },
        {
          key: 'unable',
          value: 0,
          label: '停用',
          num: 0 // 停用数量
        }
      ],
      // 安排司机
      carModalInfo: {}, // 弹窗需要的车辆详情数据
      driversList: [] // 司机列表数据

    }
  },
  created() {
    this.getCarTypesNum()
    this.getAllCarList()// 获取全部车辆列表
  },
  methods: {
    /**
     *司机配置
     */
    // 打开安排司机弹窗
    handleArrangeDriver(row) {
      const h = this.$createElement
      this.$confirm(
        `启用`,
        {
          title: '车辆配置',
          message: h('div',
            [h('p', { style: 'margin-bottom :9px;color:#332929' }, '配置司机需满足以下条件：'),
              h('span', { style: 'width: 16px;height: 16px;background: #FAFCFF;border: 1px solid #EBEEF5;border-radius : 50% ;display : inline-block ;text-align:center ;margin-right:6px;line-height:14px;' }, '1'),
              h('span', { style: 'color:#332929' }, '车辆信息已完善'),
              h('span', { style: 'width: 16px;height: 16px;background: #FAFCFF;border: 1px solid #EBEEF5;margin-left :90px ; border-radius : 50% ;display : inline-block ;text-align:center;line-height:14px;margin-right:6px' }, '2'),
              h('span', { style: 'color:#332929' }, '车辆无未完成运输任务')]),
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: 'startconfirm'
        },
      )
        .then(() => {
          this.carModalInfo = Object.assign({}, row)
          this.$refs.arrangeDriverModels.dialogFormV()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    /**
     * 车辆启用
     */
    doWorkCar(state, id) {
      this.$confirm(
        `${state ? '<p>你确认要停用车辆吗？车辆需要满足以下条件：</p><p><span class="one">1、车辆当前无运输任务</span><span>2、车辆无关联运输线路</span></p><p>注：停用后司机将自动解绑</p>' : '<p>你确认要启用车辆吗？车辆需要满足以下条件：</p><p><span class="one">1、车辆信息已完善</span><span>2、绑定司机>=2，且有排班</span></p>'}`,
        `${state ? '停用' : '启用'}车辆`,
        {
          dangerouslyUseHTMLString: true
        }).then(async () => {
        if (state) {
          // 停用
          const res = await truckStatusNoUse(id)
          console.log(res)
          this.$message.error(res.msg)
        } else {
          // 启用
          const res = await truckStatusUse(id)
          console.log(res)
          this.$message.error(res.msg)
        }
      }).catch(() => {
        this.$message.info('已取消')
      })
    },
    /**
     * 查看详情
     */
    Edit(id) {
      // console.log(id)
      this.$router.push(`/transit/vehicle-detail?id=${id}&formUrlName=车辆管理`)
    },
    /**
     * 添加功能
     */
    addCar() {
      this.$refs.addVehicleModels.dialogFormV()
      this.titleInfo.text = '新增车辆'
      this.formData.id = ''
      this.formData.deviceGpsId = ''
      this.formData.licensePlate = ''
      this.formData.allowableLoad = ''
      this.formData.allowableVolume = ''
      this.formData.fleet = ''
      this.formData.truckType = ''
    },
    getData() {
      this.getAllCarList()
      this.getCarTypeStatics()
      this.getDriverList()
    },
    // 获取统计车辆数据
    async getCarTypeStatics() {
      const { data: res } = await getCarTypeStatics()
      this.settingList[2].num = res[0] || 0
      this.settingList[1].num = res[1] || 0
      this.settingList[0].num = Number(this.settingList[1].num) + Number(this.settingList[2].num)
    },
    // 获取未绑定司机列表
    async getDriverList() {
      const { data: res } = await unBindDriverList()
      this.driversList = res
    },
    /**
     * 搜索功能
     */
    async searchCar() {
      this.loading = true
      const res = await truckList({
        page: this.page,
        pageSize: this.pageSize,
        licensePlate: this.searchForm.slicensePlate,
        truckTypeId: this.searchForm.struckTypeId
      })
      console.log('搜索的结果', res)
      this.carList = res.data.items
      this.total = +res.data.counts
      this.loading = false
    },
    /**
     * 表单重置
     */
    resetSearchForm() {
      this.searchForm = {
        slicensePlate: '', // 车牌号码
        struckTypeId: ''// 车牌类型的ID
      }
      this.$refs.searchForm.resetFields()
      this.getAllCarList()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getCarTypesNum()// 获取tab栏的数量
      this.getAllCarList()// 获取车辆列表
    },

    handleCurrentChange(val) {
      this.page = val
      this.getCarTypesNum()// 获取tab栏的数量
      this.getAllCarList()// 获取车辆列表
    },
    indexMethod(index) {
      return (this.page - 1) * this.pageSize + index + 1
    },
    // 状态变更
    tabChange(activeIndex) {
      this.statusType = activeIndex
      if (activeIndex === 0) {
        this.$nextTick(() => {
          this.getAllCarList()// 获取全部车辆列表
        })
      } else if (activeIndex === 1) {
        this.$nextTick(() => {
          this.getWorkCarList()
          this.carList = this.workCarList
        })
      } else if (activeIndex === 2) {
        this.$nextTick(() => {
          this.getUnWorkCarList()
        })
      }
    },
    async getCarTypesNum() {
      // 计算停用的数量和可用的数量
      const { data } = await getCarTypeStatics()
      // console.log('车辆类型数量', data)
      this.unWorkCarNum = data[0]
      this.workCarNum = data[1]
      this.allCar = +data[0] + +data[1]
      // console.log(this.unWorkNum, this.workNum0)
      // 获取车辆类型的列表
      const { data: typeList } = await getCarTypeList()
      // console.log('车辆类型', typeList)
      this.carTypeList = typeList
    },
    /**
     * 获取全部车辆的信息
     */
    async getAllCarList() {
      // 获取车辆信息的列表
      // console.log(this.carList)
      this.loading = true
      const res = await truckList({
        page: this.page,
        pageSize: this.pageSize,
        licensePlate: this.searchForm.slicensePlate,
        truckTypeId: this.searchForm.struckTypeId
      })
      // console.log('车辆信息列表', res)
      this.total = +res.data.counts
      // this.carList = this.allCarList = res.data.items
      this.carList = res.data.items
      // console.log('全部车辆', this.allCarList)
      this.loading = false
    },
    async getWorkCarList() {
      this.loading = true
      const res = await truckList({
        page: this.page,
        pageSize: this.pageSize,
        workStatus: 1,
        licensePlate: this.searchForm.slicensePlate || null,
        truckTypeId: this.searchForm.struckTypeId || null
      })
      console.log(res)
      this.total = +res.data.counts
      this.carList = this.workCarList = res.data.items
      // console.log('启用车辆', this.workCarList)
      this.loading = false
    },
    async getUnWorkCarList() {
      this.loading = true
      const res = await truckList({
        page: this.page,
        pageSize: this.pageSize,
        workStatus: 0,
        licensePlate: this.searchForm.slicensePlate,
        truckTypeId: this.searchForm.struckTypeId
      })
      console.log(res)
      this.total = +res.data.counts
      this.carList = this.unWorkCarList = res.data.items
      // console.log('停用车辆', this.unWorkCarList)
      this.loading = false
    }
  }

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.top{
  margin-top: 20px;
}
.list{
  margin: 20px;
}
.addcar{
  margin: 20px 0;
}
.alert {
  margin: 10px 0px;
}
.pagination {
  margin: 10px 25%;
}
.one{
  margin-right: 5px;
}

.search,

.table {
  padding: 5px 12px 0;
  el-card{
    display: flex;
    text-align: center;
  }
}

.vehicle /deep/ .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;

}

.vehicle {
  /deep/ .el-dialog__title {
    width: 73px;
    height: 25px;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #20232a;
    line-height: 25px;
    letter-spacing: 0px;
  }
  /deep/ .el-dialog__body {
    text-align: center;
    padding: 20px 20px 0px 20px;
  }
  .warn-img {
    width: 40px;
  }
  p {
    height: 24px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #818693;
    line-height: 24px;
  }
}

// 下拉框
/deep/ .el-select {
  width: 100%;
}
   /deep/ .el-badge__content--warning{
      background-color: #F56C6C ;
    }

</style>

<style>
  .startconfirm{
    width: 481px;

    }
    .startconfirm .el-message-box__header{
      padding-bottom: 4px;
    }
    .startconfirm .el-message-box__container{
      margin-bottom: 15px;
    }
    .confirm .el-message-box__status.el-icon-warning{
      left: 70px;
    }
    .confirm.el-message-box__title{
      font-size: 16px;
    }
    .confirm .el-message-box__message p {
      color: #F92D2D;
      margin-top: 5px;
    }
    .confirm .el-message-box__btns{
      text-align: center;
      margin-top: 10px;
    }

</style>
